<template>
  <div class="homeMainIndex">
    <div class="mainGallery">
      <div class="mainGalleryTextMain">
        <div class="textTitle">{{ carouselTop.title }}</div>
        <div>{{ carouselTop.creationtime }}</div>
        <div>{{ carouselTop.place }}</div>
        <div v-html="carouselTop.content"></div>
      </div>
      <img :src="carouselTop.imgurl" v-if="videoType">
      <video muted autopla loop="loop" :controls="false" :src="carouselTop.imgurl" ref="videoHtml" v-else></video>
    </div>
    <div class="mainContainer">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
          <Feature :titleName="'博客信息'" class="bolgMain">
            <slot>
              <el-row :gutter="10">
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">笔记数量</div>
                    <div class="number">{{ bjTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">方案数量</div>
                    <div class="number">{{ faTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">文章数量</div>
                    <div class="number">{{ wzTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">作品数量</div>
                    <div class="number">{{ worksTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">游记数量</div>
                    <div class="number">{{ travelsTota }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">素材数量</div>
                    <div class="number">{{ scTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">友链数量</div>
                    <div class="number">{{ linkTotal }}</div>
                  </div>
                </el-col>
                <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                  <div class="bolgStatistics">
                    <div class="titleName">留言数量</div>
                    <div class="number">{{ lyTotal }}</div>
                  </div>
                </el-col>
              </el-row>
            </slot>
          </Feature>
          <Feature :titleName="'通知公告'" class="noticeMain">
            <slot>
              <div class="noticeMainText">{{ noticeList.title }}</div>
            </slot>
          </Feature>
          <Feature :titleName="'常用链接'">
            <slot>
              <div class="linkMain">
                <template v-for="(item, index) in websiteLit">
                  <el-tag @click="jump(item, '6')" v-if="item.linktype === '前端框架'">{{ item.title }}</el-tag>
                  <el-tag type="success" @click="jump(item, '6')" v-if="item.linktype === '常用工具'">{{ item.title }}</el-tag>
                  <el-tag type="info" @click="jump(item, '6')" v-if="item.linktype === '字体图标'">{{ item.title }}</el-tag>
                  <el-tag type="warning" @click="jump(item, '6')" v-if="item.linktype === '素材图片'">{{ item.title }}</el-tag>
                  <el-tag type="danger" @click="jump(item, '6')" v-if="item.linktype === '实用插件'">{{ item.title }}</el-tag>
                  <el-tag type="success" @click="jump(item, '6')" v-if="item.linktype === '素材网站'">{{ item.title }}</el-tag>
                </template>
              </div>
            </slot>
          </Feature>
          <Feature :titleName="'联系作者'" class="contactMain">
            <slot>
              <div class="contactMainList">
                <div class="listMain">
                  <span class="listMainLable">电话号码</span>
                  <span>{{ zylPhoneList.phones }}</span>
                </div>
                <div class="listMain">
                  <span class="listMainLable">腾讯QQ</span>
                  <span>{{ zylPhoneList.qq }}</span>
                </div>
                <div class="listMain">
                  <span class="listMainLable">电子邮箱</span>
                  <span>{{ zylPhoneList.email }}</span>
                </div>
              </div>
            </slot>
          </Feature>
        </el-col>
        <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
          <Feature :titleName="'追寻前辈的步伐，不如开创自己的时代'">
            <slot>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-carousel class="carouselMain" height="240px" v-if="carouselLeft.length > 0">
                    <template v-for="(item, index) in carouselLeft">
                      <el-carousel-item>
                        <img :src="item.imgurl" style="width: 100%; height: 100%">
                      </el-carousel-item>
                    </template>
                  </el-carousel>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-carousel height="240px" v-if="carouselRight.length > 0">
                    <template v-for="(item, index) in carouselRight">
                      <el-carousel-item>
                        <img :src="item.imgurl" style="width: 100%; height: 100%">
                      </el-carousel-item>
                    </template>
                  </el-carousel>
                </el-col>
              </el-row>
            </slot>
          </Feature>
          <el-row :gutter="10">
            <template v-for="(item, index) in entranceList">
              <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
                <div class="columnMain zylTransition" @click="jump(item, '1')">
                  <div class="columnNumber zylTransition">{{ item.title.slice(3,4) }}</div>
                  <div class="columnTitle">{{ item.title }}</div>
                  <div class="columnText">{{ item.brief }}</div>
                </div>
              </el-col>
            </template>
          </el-row>
          <Feature :titleName="'开发笔记'">
            <slot>
              <el-row :gutter="10">
                <template v-for="(item, index) in noteList">
                  <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="index < 9">
                    <div class="noteMain">
                      <div class="noteImg">
                        <img :src="item.imgurl" class="zylTransition">
                      </div>
                      <div class="noteCont zylTransition">
                        <div class="noteTitle">{{ item.title }}</div>
                        <div class="noteTime"><span class="zylTransition">{{ item.label }}</span>{{ item.creationtime }} 【预览】{{ item.flow }} 次</div>
                        <div class="noteText">{{ item.brief }}</div>
                        <div class="noteBnt zylTransition" @click="jump(item, '2')">查看详情</div>
                      </div>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </slot>
          </Feature>
          <Feature :titleName="'项目案例'">
            <slot>
              <el-row :gutter="10" id="myPhotoWork">
                <template v-for="(item, index) in workList">
                  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="workMain">
                      <div class="workTitleMain zylTransition" @click="jump(item, '3')">{{ item.title }}</div>
                      <img :src="item.imgurl" @click="onImageFn(item, index)">
                    </div>
                  </el-col>
                </template>
              </el-row>
            </slot>
          </Feature>
          <el-row :gutter="10">
            <template v-for="(item, index) in userLinkList">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                <Feature :titleName="item.title" class="releaseMain" @click="jump(item, '4')">
                  <slot>
                    <img :src="item.imgurl">
                  </slot>
                </Feature>
              </el-col>
            </template>
          </el-row>
          <Feature :titleName="'关于【友情链接】状态说明'">
            <slot>
              <div class="linksTypeMain">
                <div>正常：该友链能正常访问，无异常情况。</div>
                <div>异常：该友链短时间出现无法访问或异常跳转的情况。</div>
                <div>失效：该友链长时间出现无法访问或异常跳转的情况；本站点将隐藏处于失效状态下的友链，直到恢复正常访问为止！</div>
              </div>
              <el-row :gutter="10">
                <template v-for="(item, index) in linksLit">
                  <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                    <div class="linksMain zylTransition" @click="jump(item, '5')">
                      <div class="linkLeft zylTransition">
                        <div class="linksNormal zylTransition" v-if="item.linktype === '正常'">{{ item.linktype }}</div>
                        <div class="linksAbnormal zylTransition" v-if="item.linktype === '异常'">{{ item.linktype }}</div>
                        <div class="linksInvalid zylTransition" v-if="item.linktype === '失效'">{{ item.linktype }}</div>
                      </div>
                      <div class="linkRight zylTransition">
                        <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                        <div class="zylDescribe">{{ item.creationtime }}</div>
                        <div class="linkText zylDescribe zylSpace">简介：{{ item.brief }}</div>
                        <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                      </div>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </slot>
          </Feature>

        </el-col>
      </el-row>
    </div>
    <!-- 图片查看器 -->
    <ElImageViewer
            :isImageData="isImageData"
            :isImageList="rightImgList"
            v-if="showElImageViewer"
            @onImageViewerCallback="onImageViewerCallback" />
  </div>
</template>
<script>
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 首页
  name: 'homeMain',
  components: {
    Feature,
  },
  data () {
    return {
      carouselTop: '',
      carouselLeft: [],
      carouselRight: [],
      entranceList: [],
      noteList: [],
      workList: [],
      userLinkList: [],
      linksLit: [],

      noticeList: '',
      websiteLit: [],

      wzTotal: '',
      faTotal: '',
      bjTotal: '',
      worksTotal: '',
      scTotal: '',
      linkTotal: '',
      lyTotal: '',
      travelsTota: '',
      zylPhoneList: '',

      videoType: true,

      // 图片查看器
      showElImageViewer: false,
      isImageData: {
        imageUrl: '',
        imageTitle: '',
        imageIndex: 0,
      },
      rightImgList: [],
    };
  },
  mounted () {
    this.getNotearticleTotal ('笔记');
    this.getNotearticleTotal ('文章');
    this.getNotearticleTotal ('方案');
    this.getZylworksTotal();
    this.getZylWebsiteTotal();
    this.getZylLinkTotal();
    this.getLeavingTotal();
    this.getTravelsIdTota();
    this.getZylphoneAll();

    this.getNavigationStateNavtype('二级栏目');
    this.getNavigationStateNavtype('三级栏目');
    this.getTravelsImgtype();
    this.getRotationStateImgtype('左');
    this.getRotationStateImgtype('右');
    this.getNotearticleState();
    this.getZylworksState();
    this.getZylLinkState();

    this.getZylNoticeAll();
    this.getZylWebsiteState();
  },
  methods: {
    // 导航
    getNavigationStateNavtype (index) {
      let params = {
        state: '是',
        navtype: index,
      };
      Interface.getNavigationStateNavtype(params).then(res => {
        if (res.status === 200) {
          switch (index) {
            case '二级栏目':
              this.entranceList = res.data;
              break
            case '三级栏目':
              this.userLinkList = res.data;
              break
          }
        }
      })
    },

    // 统计笔记总数
    getNotearticleTotal (typeLabel) {
      let params = {
        label: typeLabel,
      };
      Interface.getNotearticleTotal(params).then(res => {
        if (res.status === 200) {
          switch (typeLabel) {
            case '笔记':
              this.bjTotal = res.data[0].totals;
              break
            case '文章':
              this.wzTotal = res.data[0].totals;
              break
            case '方案':
              this.faTotal = res.data[0].totals;
              break
          };
        };
      })
    },

    // 统计作品总数
    getZylworksTotal () {
      Interface.getZylworksTotal().then(res => {
        if (res.status === 200) {
          this.worksTotal = res.data[0].totals
        }
      })
    },

    // 统计素材总数
    getZylWebsiteTotal () {
      Interface.getZylWebsiteTotal().then(res => {
        if (res.status === 200) {
          this.scTotal = res.data[0].totals;
        };
      })
    },

    // 统计友链总数
    getZylLinkTotal () {
      Interface.getZylLinkTotal().then(res => {
        if (res.status === 200) {
          this.linkTotal = res.data[0].totals;
        };
      })
    },

    // 统计留言
    getLeavingTotal (typeLabel) {
      let params = {
        label: typeLabel,
      };
      Interface.getLeavingTotal(params).then(res => {
        if (res.status === 200) {
          this.lyTotal = res.data[0].totals;
        };
      })
    },

    // 统计游记总数
    getTravelsIdTota () {
      Interface.getTravelsIdTota().then(res => {
        if (res.status === 200) {
          this.travelsTota = res.data[0].totals;
        };
      })
    },

    // 联系作者
    getZylphoneAll () {
      Interface.getZylphoneAll().then(res => {
        if (res.status === 200) {
          this.zylPhoneList = res.data[0];
        };
      })
    },

    // 首页顶部大图
    getTravelsImgtype () {
      let params = {
        state: '是',
        imgtype: '首页',
      };
      Interface.getTravelsImgtype(params).then(res => {
        if (res.status === 200) {
          this.carouselTop = res.data[0];
          if (this.carouselTop.imgurl.substr(-4) === '.mp4') {
            this.videoType = false
            this.$nextTick(()=> {
              let videoHtml = this.$refs.videoHtml
              videoHtml.addEventListener('canplaythrough', ()=> {
                videoHtml.play()
              })
            })
          }
        };
      })
    },

    // 首页左右轮播图
    getRotationStateImgtype (index) {
      let params = {
        state: '是',
        imgtype: '首页展示',
        position: index,
      };
      Interface.getRotationStateImgtype(params).then(res => {
        if (res.status === 200) {
          switch (index) {
            case '左':
              this.carouselLeft = res.data;
              break
            case '右':
              this.carouselRight = res.data;
              break
          }
        };
      })
    },

    // 开发笔记
    getNotearticleState () {
      let params = {
        state: '是',
      };
      Interface.getNotearticleState(params).then(res => {
        if (res.status === 200) {
          this.noteList = res.data.list;
        }
      })
    },

    // 项目案例
    getZylworksState () {
      let params = {
        state: '是',
        pageNum: 1,
        pageSize: 9
      }
      this.rightImgList = []
      Interface.getZylworksState(params).then(res => {
        if (res.status === 200) {
          this.workList = res.data.list
          this.workList.map(item => {
            this.rightImgList.push(
                {
                  id: item.id,
                  title: item.title,
                  isUrl: item.imgurl,
                }
            )
          })
        }
      })
    },

    // 友情链接
    getZylLinkState () {
      let params = {
        state: '是',
        pageNum: '1',
        pageSize: '9',
      };
      Interface.getZylLinkState(params).then(res => {
        if (res.status === 200) {
          this.linksLit = res.data.list;
        }
      })
    },

    // 通知公告
    getZylNoticeAll () {
      Interface.getZylNoticeAll().then(res => {
        if (res.status === 200) {
          this.noticeList = res.data[0];
        }
      })
    },

    // 常用链接
    getZylWebsiteState () {
      let params = {
        state: '是',
        showtype: '常用链接',
        pageNum: '1',
        pageSize: '8',
      };
      Interface.getZylWebsiteState(params).then(res => {
        if (res.status === 200) {
          this.websiteLit = res.data;
        }
      })
    },

    // 记录栏目访问量
    postNavigationUpdateFlow (id, flow) {
      let params = {
        id: id,
        flow: flow,
      };
      Interface.postNavigationUpdateFlow(params).then(res => {})
    },

    // 跳转
    jump (item, index) {
      let routeUrl;
      switch (index) {
        case '1':
          this.postNavigationUpdateFlow(item.id, item.flow);
          routeUrl = this.$router.resolve({
            path: item.navurl,
          });
          window.open(routeUrl.href, '_blank');
          break
        case '2':
          routeUrl = this.$router.resolve({
            path: '/content/Index',
            query: {
              id: item.id,
            }
          });
          window.open(routeUrl.href, '_blank');
          break
        case '3':
          window.open(item.worksurl, '_blank');
          break
        case '4':
          this.postNavigationUpdateFlow(item.id, item.flow);
          window.open(item.navurl, '_blank');
          break
        case '5':
          window.open(item.linkurl, '_blank');
          break
        case '6':
          window.open(item.linkurl, '_blank');
          break
      };
    },

    // 点击图片
    onImageFn (item, index) {
      this.isImageData.imageUrl = item.imgurl
      this.isImageData.imageTitle = item.title
      this.isImageData.imageIndex = index
      this.showElImageViewer = true
    },

    // 图片查看器回调
    onImageViewerCallback (item) {
      switch (item.type) {
        case 'close':
          this.showElImageViewer = false
          break
        case 'download':
          alert('下载')
          break
      }
    }

  },
}
</script>
